<template>
  <div>
    <nav-bar>
      <img src="../../../assets/img/navbar/ic_title_back.png" class="left" slot="left" alt="" @click="$router.back()">
      <span slot="center">生成邀请函</span>
    </nav-bar>
    <div class="content_img" ref="imageWrapper">
      <img v-if="appType === '277'" src="../../../assets/img/strategy/ic_invitation_letter.png" alt="">
      <img v-else src="../../../assets/img/strategy/ic_invitation_letter_cat.png" alt="">
      <div class="code" ref="qrcode" id="qrcodeCode"></div>
    </div>
    <ul class="share_box">
      <li class="list_item" @click="share(0)">
        <span class="iconfont">&#xe6ea;</span>
        <div class="list_text">微信</div>
      </li>
      <li class="list_item" @click="share(1)">
        <span class="iconfont">&#xe60c;</span>
        <div class="list_text">朋友圈</div>
      </li>
      <li class="list_item" @click="share(2)">
        <span class="iconfont">&#xe610;</span>
        <div class="list_text">QQ</div>
      </li>
      <li class="list_item" @click="savePic">
        <span class="iconfont_img">
          <img src="../../../assets/img/strategy/ic_share_save_pic_invited.png" alt="">
        </span>
        <div class="list_text">保存图片</div>
      </li>
    </ul>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import QRCode from 'qrcodejs2'
import NativeShare from 'nativeshare'
import html2canvas from "html2canvas"
import {Toast} from 'vant'
import { appType } from '../../../assets/js/app'
  export default {
    components: {
      NavBar,
    },
    data() {
      return {
        url: '',
        dataURL: '',
        appType: null,
      }
    },
    created () {
      this.appType = appType()
      this.url = this.$route.query.url
      this.getQrcode()
    },
    methods: {
      transQrcode(){
        let qrcode=new QRCode('qrcodeCode',{
          width: 200,
          height:200,
          text: this.url,
        })
      // this.createPicture()
        this.toImage()
      },
      //点击开始进行转化
      getQrcode(){  
        this.$nextTick(()=>{
          this.transQrcode()
        })
      },
      toImage() {
        html2canvas(this.$refs.imageWrapper,{
          backgroundColor: null
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png")
          this.dataURL = dataURL
        })
      },
      share(val) {
        switch (val) {
          case 0:
            this.call('wechatFriend')
            break;
          case 1:
            this.call('wechatTimeline')
            break;
          case 2:
            this.call('qqFriend')
            break;
        }
      },
      call(command) {
        var nativeShare = new NativeShare()
        var shareData = {
            title: "☞中国最专业的手游福利平台！",
            desc: "手游福利，上线即送满VIP，无限元宝，充值3折起，5千款手游任选！",
            // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
            link: this.url,
            icon: this.appType === '277'? 'https://p1.277sy.com/common/app_icon.png': '../../../assets/img/home/icon_app_cat.png',
            // 不要过于依赖以下两个回调，很多浏览器是不支持的
            success: function() {
                Toast('分享成功')
            },
            fail: function() {
                Toast('分享失败')
            }
        }
        nativeShare.setShareData(shareData)
          try {
              nativeShare.call(command)
          } catch (err) {
              // 如果不支持，你可以在这里做降级处理
              console.log(err.message)
          }
      },
      //保存图片
      savePic(Url) {
        Url = this.dataURL; //图片路径，也可以传值进来
        var triggerEvent = "touchstart"; //指定下载方式
        var blob = new Blob([""], { type: "application/octet-stream" }); //二进制大型对象blob
        var url = URL.createObjectURL(blob); //创建一个字符串路径空位
        var a = document.createElement("a"); //创建一个 a 标签
        a.href = Url; //把路径赋到a标签的href上
        //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
        a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, "$2").split("?")[0];
        /* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
        var e = new MouseEvent(
          "click",
          (true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null)
        );
        //派遣后，它将不再执行任何操作。执行保存到本地
        a.dispatchEvent(e);
        //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
        URL.revokeObjectURL(url);
      },
    },
  }
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_img {
  position: relative;
  top: 88px;
  left: 0;
  width: 750px;
  height: 1112px;
}

.content_img .code {
  position: absolute;
  left: 90px;
  bottom: 95px;
  width: 200px;
  height: 200px;
}

.content_img img {
  width: 100%;
  height: 100%;
}

.share_box {
  display: flex;
  width: 750px;
  height: 140px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.list_item {
  flex: 1;
  text-align: center;
}

.iconfont {
  display: inline-block;
  margin: 30px 0 10px 0;
  font-size: 52px;
}

.iconfont_img {
  display: inline-block;
  margin: 30px 0 10px 0;
  width: 52px;
  height: 59px;
}

.iconfont_img img {
  width: 100%;
  height: 100%;
}

.list_text {
  font-size: 20px;
  color: #333;
}
</style>